<template>
  <div class="d-flex flex-column gap-col-16 mb-8">
    <InputWrap
      v-model="credential.username"
      :err-msg="parseError(errors.username)"
      :label="$t('label.account')"
      :placeholder="$t('placeholder.account')"
    ></InputWrap>
    <InputWrap
      v-model="credential.password"
      :err-msg="parseError(errors.password)"
      :label="$t('label.password')"
      :placeholder="$t('label.password')"
      password
    ></InputWrap>
  </div>
  <BlockButton
    :label="$t('label.login')"
    @click="onLoginClicked"
    :is-gradient="false"
    :disabled="loginDisabled"
  ></BlockButton>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { onKeyStroke } from '@vueuse/core'
import { parseError } from '@/plugins/yup'
import BlockButton from '@/components/button/BlockButton.vue'
import InputWrap from '@/components/form/InputWrap.vue'
import { useLogin } from '@/compositions/auth/login'

const router = useRouter()
const { credential, errors, loginDisabled, onLoginClicked } = useLogin(() => router.replace({ name: 'thank-you' }))

onKeyStroke('Enter', onLoginClicked)
</script>
